<!--
 * @description: 
 * @Date: 2022-10-18 00:35:10
 * @LastEditTime: 2022-10-31 20:34:29
-->
<template>
  <div class="linkEdit">
    <el-dialog v-model="show" :close-on-click-modal="false" :width="isMobile?'350px':'600px'" title="编辑标签">
      <div class="grid grid-rows-1 grid-cols-5">
        <div class="space-y-4 col-span-3">
          <div>
            <el-input v-model="info.name" placeholder="标签名称"></el-input>
          </div>
          <div>
            <el-input v-model="info.url" placeholder="标签url">
              <template #append>
                <el-button type="primary">获取图标</el-button>
              </template>
            </el-input>
          </div>
          <div>
            <el-input v-model="info.src" placeholder="标签图标地址">
              <template #append>
                <el-upload class="upload-demo" :show-file-list="false" :on-success="upimg"
                  :action="store.state.site.upload">
                  <el-button type="primary">上传</el-button>
                </el-upload>
              </template>
            </el-input>
          </div>
        </div>
        <div class="col-span-2 ml-3">
          <img :src="info.src" class="w-9/12 rounded-2xl" />
        </div>
      </div>
      <div class="flex mt-3">
        <el-button class="ml-auto bg-blue-400" type="primary" @click.stop="save">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import emitter from '../util/emitter';
import { onUnmounted, ref } from 'vue';
import { useStore } from "vuex"
import uuid from '@/util/uuid.js';
const isMobile = window.isMobile
const show = ref(false)
const store = useStore()
const defData = {
  id: '',
  name: '',
  src: '',
  url: '',
  size: '1x1',
  type: 'icon'
}
const info = ref(Object.assign({},defData))
const open = (data = false) => {
  info.value = Object.assign({}, defData)
  if (data) {
    info.value = data
  }
  show.value = true;
}
const upimg = (data) => {
  if (data.code == 1) {
    info.value.src = data.url
  }
}
const save = () => {
  if (info.value.id == "") {
    //新增
    info.value.id = uuid()
    store.state.link.push(info.value)
  } else {
    const index = store.state.link.findIndex(el => el.id == info.value.id);
    store.state.link[index] = info.value
  }

  store.commit("updateLink", store.state.link)
  show.value = false
}
emitter.on("linkEdit", open)
onUnmounted(() => {
  emitter.off("linkEdit".open)
})
</script>